import React from 'react';
import {
  Row,
  Col,
  Progress,
  Badge,
  Card,
  Tabs,
  Table,
  Dropdown,
  Menu,
  Icon,
} from 'antd';
import QuickEntryModal from './QuickEntryModal';

import styles from './index.module.less';

export default class SellerHome extends React.Component {
  state = {
    auth: true,
    quickEntryModalVisible: false,
  };

  handleQuickEntryModalVisible = flag => {
    this.setState({
      quickEntryModalVisible: !!flag,
    });
  };

  render() {
    const { auth, quickEntryModalVisible } = this.state;

    const quickEntryModalProps = {
      quickEntryModalVisible,
      handleQuickEntryModalVisible: this.handleQuickEntryModalVisible,
    };

    const unAuthBox = (
      <div className={styles.unAuthBox}>
        <div className={styles.unAuthTitle}>开通卖家工作台</div>
        <div className={styles.unAuthTip}>完成企业认证，可以在平台进行开店</div>
        <button className={styles.unAuthBtn}>立即认证</button>
      </div>
    );

    const columns = [
      {
        key: 'ranking',
        title: '排名',
        dataIndex: 'ranking',
      },
      {
        key: 'goods',
        title: '商品',
        dataIndex: 'goods',
      },
      {
        key: 'collection',
        title: '收藏量',
        dataIndex: 'collection',
      },
      {
        key: 'views',
        title: '浏览量',
        dataIndex: 'views',
      },
      {
        key: 'sales',
        title: '销量',
        dataIndex: 'sales',
      },
      {
        key: 'amount',
        title: '销售金额',
        dataIndex: 'amount',
      },
    ];

    const data = [
      {
        key: 1,
        ranking: 1,
        goods: '蓝白片',
        collection: 200,
        views: 100,
        sales: 150,
        amount: 1000,
      },
      {
        key: 2,
        ranking: 1,
        goods: '蓝白片',
        collection: 200,
        views: 100,
        sales: 150,
        amount: 1000,
      },
      {
        key: 3,
        ranking: 1,
        goods: '蓝白片',
        collection: 200,
        views: 100,
        sales: 150,
        amount: 1000,
      },
      {
        key: 4,
        ranking: 1,
        goods: '蓝白片',
        collection: 200,
        views: 100,
        sales: 150,
        amount: 1000,
      },
      {
        key: 5,
        ranking: 1,
        goods: '蓝白片',
        collection: 200,
        views: 100,
        sales: 150,
        amount: 1000,
      },
    ];

    const menu = (
      <Menu>
        <Menu.Item key='0'>
          <span>收藏量</span>
        </Menu.Item>
        <Menu.Item key='1'>
          <span>浏览量</span>
        </Menu.Item>
      </Menu>
    );

    return (
      <div className={styles.wrapperBox}>
        {
          auth ? (
            <div className={styles.authBox}>
              <Row className={styles.rowBox} gutter={20}>
                <Col span={16}>
                  <Row className={styles.rowBox}>
                    <Col span={8}>
                      <div className={styles.accountSafetyBox}>
                        <div className={styles.userAvatarBox}>
                          <div className={styles.avatar}>
                            <img src='http://pic.58pic.com/58pic/15/18/22/16b58PICrgE_1024.jpg' alt='头像' />
                          </div>
                        </div>
                        <Row>
                          <Col span={4}>账户安全</Col>
                          <Col span={20}>
                            <Progress percent={30} size='small' />
                          </Col>
                        </Row>
                        <Row>
                          <Col span={4}>账户安全</Col>
                          <Col span={20}>
                            <Progress percent={30} size='small' />
                          </Col>
                        </Row>
                      </div>
                    </Col>
                    <Col span={16}>
                      <div className={styles.accountInfoBox}>
                        <div className={styles.transactionAccountBox}>
                          <div className={styles.accountTitle}>
                            我的账户
                          </div>
                          <div className={styles.transactionAmount}>
                            交易额 20000
                          </div>
                        </div>
                        <Row className={styles.AccountLeftAmountBox}>
                          <Col className={styles.amountItem} span={8}>
                            <div className={styles.amountTitle}>
                              账户余额
                            </div>
                            <div className={styles.amountNumber}>
                              20000
                            </div>
                          </Col>
                          <Col className={`${styles.amountItem} ${styles.centerItem}`} span={8}>
                            <div className={styles.amountTitle}>
                              保证金
                            </div>
                            <div className={styles.amountNumber}>
                              20000
                            </div>
                          </Col>
                          <Col className={styles.amountItem} span={8}>
                            <div className={styles.amountTitle}>
                              可用积分
                            </div>
                            <div className={styles.amountNumber}>
                              20000
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col className={styles.quickEntryBox}>
                      <Card
                        title={(<span className={styles.leftText}>快捷入口</span>)}
                        bordered={false}
                        headStyle={{ padding: '0 20px' }}
                        bodyStyle={{ padding: 20, height: 122 }}
                        extra={(<span className={styles.rightText} onClick={this.handleQuickEntryModalVisible.bind(this, true)}>自定义></span>)}
                      >
                        <Row className={styles.toolsBox}>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-fabushangpin ${styles.icon} ${styles.textLightRed}`}></i>
                              <div className={styles.text}>
                                发布商品
                              </div>
                            </div>
                          </Col>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-dingdanguanli ${styles.icon} ${styles.textLightYellow}`}></i>
                              <div className={styles.text}>
                                订单管理
                              </div>
                            </div>
                          </Col>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-dianpuguanli ${styles.icon} ${styles.textLightOrange}`}></i>
                              <div className={styles.text}>
                                店铺管理
                              </div>
                            </div>
                          </Col>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-youhuiquanguanli ${styles.icon} ${styles.textLightGreen}`}></i>
                              <div className={styles.text}>
                                优惠券管理
                              </div>
                            </div>
                          </Col>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-zhanghaoguanli ${styles.icon} ${styles.textLightBlue}`}></i>
                              <div className={styles.text}>
                                账号管理
                              </div>
                            </div>
                          </Col>
                          <Col className={styles.toolsItemBox} span={4}>
                            <div className={styles.item}>
                              <i className={`iconfont icon-jiaoyiziliaoguanli ${styles.icon} ${styles.textLightYellow}`}></i>
                              <div className={styles.text}>
                                交易资料管理
                              </div>
                            </div>
                          </Col>
                        </Row>
                      </Card>
                    </Col>
                  </Row>
                </Col>
                <Col className={styles.backlogBox} span={8}>
                  <Card
                    title={(<Badge count={25}>待办事项</Badge>)}
                    bordered={false}
                    headStyle={{ padding: '0 20px' }}
                    bodyStyle={{ padding: 0, height: 308, overflow: 'auto' }}
                    extra={(<div className={styles.refreshBtn}><i className={`iconfont icon-zaixiankefu ${styles.refreshIcon}`}></i></div>)}
                  >
                    <ul className={styles.backlogScrollBox}>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                          代发货订单：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                          去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                          待退款/退货订单：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                          去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                          待上架商品：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                          去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                          绑定邮箱：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                          去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                          升级密码：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                          去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                      <li className={styles.clearfix}>
                        <span className={styles.backlogNoticeText}>
                            待评价回复：10个
                        </span>
                        <span className={styles.backlogHandleBtn}>
                            去处理
                        </span>
                      </li>
                    </ul>
                  </Card>
                </Col>
              </Row>
              <Row className={styles.rowBox}>
                <Col className={styles.statisticsBox}>
                  <Card
                    title='数据统计'
                    bordered={false}
                    headStyle={{ padding: '0 20px' }}
                    bodyStyle={{ padding: 0 }}
                  >
                    <Row>
                      <Col className={`${styles.statisticsItemBox} ${styles.clearfix}`} span={6}>
                        <div className={styles.statisticsItemIcon}>
                          <i className={`iconfont icon-shishoujine ${styles.itemIcon} ${styles.textLightBlue}`}></i>
                        </div>
                        <div className={styles.statisticsItemInfoBox}>
                          <div className={styles.infoTitle}>实收金额（元）</div>
                          <div className={styles.infoNumber}>0</div>
                          <div className={styles.infoHistoryNumber}>昨日：0</div>
                        </div>
                        <div className={styles.statisticsItemHandle}>
                          <i className={`iconfont icon-xiangshangjiantou-copy-copy ${styles.handleIcon}`}></i>
                        </div>
                      </Col>
                      <Col className={`${styles.statisticsItemBox} ${styles.clearfix}`} span={6}>
                        <div className={styles.statisticsItemIcon}>
                          <i className={`iconfont icon-zhifudingdanshu ${styles.itemIcon} ${styles.textLightYellow}`}></i>
                        </div>
                        <div className={styles.statisticsItemInfoBox}>
                          <div className={styles.infoTitle}>支付订单数</div>
                          <div className={styles.infoNumber}>0</div>
                          <div className={styles.infoHistoryNumber}>昨日：0</div>
                        </div>
                        <div className={styles.statisticsItemHandle}>
                          <i className={`iconfont icon-xiangshangjiantou-copy-copy ${styles.handleIcon}`}></i>
                        </div>
                      </Col>
                      <Col className={`${styles.statisticsItemBox} ${styles.clearfix}`} span={6}>
                        <div className={styles.statisticsItemIcon}>
                          <i className={`iconfont icon-zhifurenshu ${styles.itemIcon} ${styles.textLightGreen}`}></i>
                        </div>
                        <div className={styles.statisticsItemInfoBox}>
                          <div className={styles.infoTitle}>支付人数</div>
                          <div className={styles.infoNumber}>0</div>
                          <div className={styles.infoHistoryNumber}>昨日：0</div>
                        </div>
                        <div className={styles.statisticsItemHandle}>
                          <i className={`iconfont icon-xiangshangjiantou-copy-copy ${styles.handleIcon}`}></i>
                        </div>
                      </Col>
                      <Col className={`${styles.statisticsItemBox} ${styles.lastItem} ${styles.clearfix}`} span={6}>
                        <div className={styles.statisticsItemIcon}>
                          <i className={`iconfont icon-fangkeshu ${styles.itemIcon} ${styles.textLightOrange}`}></i>
                        </div>
                        <div className={styles.statisticsItemInfoBox}>
                          <div className={styles.infoTitle}>访客数</div>
                          <div className={styles.infoNumber}>0</div>
                          <div className={styles.infoHistoryNumber}>昨日：0</div>
                        </div>
                        <div className={styles.statisticsItemHandle}>
                          <i className={`iconfont icon-xiangshangjiantou-copy-copy ${styles.handleIcon}`}></i>
                        </div>
                      </Col>
                    </Row>
                  </Card>
                </Col>
              </Row>
              <Row gutter={20}>
                <Col span={12}>
                  <Card
                    title='商品热销排行榜'
                    bordered={false}
                    headStyle={{ textAlign: 'center' }}
                    bodyStyle={{ padding: '0 20px 20px 20px' }}
                  >
                    <Tabs
                      defaultActiveKey='1'
                      tabBarStyle={{ textAlign: 'center', width: 322, margin: '0 auto 10px' }}
                    >
                      <Tabs.TabPane tab='今日排行' key='1'>
                        <Table
                          pagination={false}
                          columns={columns}
                          dataSource={data}
                        />
                      </Tabs.TabPane>
                      <Tabs.TabPane tab='近7日排行' key='2'>Content of Tab Pane 2</Tabs.TabPane>
                      <Tabs.TabPane tab='月排行' key='3'>Content of Tab Pane 3</Tabs.TabPane>
                    </Tabs>
                  </Card>
                </Col>
                <Col span={12}>
                  <Card
                    title='商品收藏量/浏览量排行榜'
                    bordered={false}
                    headStyle={{ textAlign: 'center' }}
                    bodyStyle={{ padding: '0 20px 20px 20px' }}
                  >
                    <div style={{ position: 'absolute', top: 68, zIndex: 999 }}>
                      <Dropdown
                        overlay={menu}
                        trigger={[ 'click' ]}
                      >
                        <a>
                          收藏 <Icon type='down' />
                        </a>
                      </Dropdown>
                    </div>
                    <Tabs
                      defaultActiveKey='1'
                      tabBarStyle={{ textAlign: 'center', width: 322, margin: '0 auto 10px' }}
                    >
                      <Tabs.TabPane tab='今日排行' key='1'>
                        <Table
                          pagination={false}
                          columns={columns}
                          dataSource={data}
                        />
                      </Tabs.TabPane>
                      <Tabs.TabPane tab='近7日排行' key='2'>Content of Tab Pane 2</Tabs.TabPane>
                      <Tabs.TabPane tab='月排行' key='3'>Content of Tab Pane 3</Tabs.TabPane>
                    </Tabs>
                  </Card>
                </Col>
              </Row>
              <QuickEntryModal {...quickEntryModalProps} />
            </div>
          ) : { unAuthBox }
        }
      </div>
    );
  }
}
